<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>position定位</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .a {
            width: 300px;
            height: 600px;
            background-color: yellowgreen;
        }
        .b {
            width: 300px;
            height: 300px;
            background-color: blanchedalmond;
            /* 相对定位 */
            position: relative;
            /* 固定定位 */
            /* position: fixed;
            top: 0;
            right: 0; */
            /* 粘性定位 */
            /* position: sticky;
            top: 0; */
        }
        .c {
            width: 300px;
            height: 600px;
            background-color: coral;
        }
        .bb {
            width: 50px;
            height: 50px;
            background-color: pink;
            /* 绝对定位 */
            /* position: absolute;
            right: 50%;
            bottom: 50%; */
        }
    </style>
</head>
<body>
    <div class="a"></div>
    <div class="b">
        <div class="bb"></div>
    </div>
    <div class="c">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit aut dolor doloremque quis, cumque porro eius deleniti doloribus! Ut quod eos amet. Magnam autem repellat officiis hic aliquam, officia maxime?
        Placeat, ipsa minus amet asperiores maiores a, voluptate, in officia unde exercitationem rem omnis. Error ad ratione molestias dicta quam ipsum molestiae, autem porro, debitis vero ducimus laboriosam neque hic.
        Eum laudantium perspiciatis excepturi, explicabo corrupti, numquam aperiam, sint earum molestiae architecto accusamus ipsam labore? Totam, repellat mollitia? Nisi minima atque autem facilis at ratione vitae iste nostrum debitis optio?
        Minus deserunt, nesciunt autem, iusto quae aperiam exercitationem nihil qui magnam a accusamus repudiandae praesentium facere illo molestias eveniet blanditiis ex dolor tempore et consequatur atque in magni velit. Nobis.
        Iure earum cum maxime doloremque voluptas perferendis autem, nesciunt nam expedita, veritatis nemo repellendus vero consectetur. Cum accusantium quae laudantium soluta fugit, tempore similique quam impedit itaque, vero molestias neque.
        Veritatis eaque, delectus ut doloremque, alias accusamus ducimus voluptas qui eveniet recusandae aliquam repellendus quis. Nesciunt amet molestiae dignissimos itaque quis numquam assumenda voluptas praesentium nobis autem, commodi eaque deleniti!
    </div>
</body>
</html>